<template>
    <div class="cond-form">
        <div class="rule-wrap">
            <el-form :model="ruleForm" :rules="rule" label-width="100px" ref="form">
                <el-form-item label-width="0px" prop="conditions" :rules="rule.conditions" class="mb10">
                    <el-row v-for="(child, index2) of ruleForm.conditions" :key="child.key">
                        <el-col :span="6">
                            <el-form-item label-width="0px" :prop="'conditions.'+ index2 +'.fieldCode'" class="mb5" :rules="rule.fieldCode">
                                <select-para 
                                    :options="condOpt" 
                                    casCode="SP_FLOW_FH" 
                                    :casVal.sync="child.opeCode"
                                    :casLabel.sync="child.opeName"
                                    :clearCasDisabled="true"
                                    v-model="child.fieldCode"
                                    :label.sync="child.fieldName"
                                    @change="(value) => conditionChange(child, value)">
                                </select-para>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item v-if="child.eleTypeCode" label-width="5px" :prop="'conditions.'+ index2 +'.opeCode'" class="mb5" :rules="rule.opeCode">
                                <!-- 单行文本、多行文本、富文本、链接、邮件、手机、固话 -->
                                <select-para 
                                    v-if="['input', 'textarea', 'richTxt', 'miniTxt', 'link', 'email', 'mobile', 'tel'].indexOf(child.eleTypeCode) > -1" 
                                    v-model="child.opeCode" 
                                    :options="casOpt1" 
                                    :label.sync="child.opeName"
                                    @change="(value) => opeCodeChange(child, value)">
                                </select-para>
                                <!-- 下拉框、单选框、复选框、标签、区域、自定义级联 -->
                                <select-para 
                                    v-if="['select', 'radio', 'checkbox', 'label', 'addr', 'diyCasc'].indexOf(child.eleTypeCode) > -1" 
                                    v-model="child.opeCode" 
                                    :options="casOpt2" 
                                    :label.sync="child.opeName"
                                    @change="(value) => opeCodeChange(child, value)">
                                </select-para>
                                <!-- 日期、日期时间、时间 -->
                                <select-para 
                                    v-if="['date'].indexOf(child.eleTypeCode) > -1" 
                                    v-model="child.opeCode" 
                                    :options="casOpt4" 
                                    :label.sync="child.opeName"
                                    @change="(value) => opeCodeChange(child, value)">
                                </select-para>
                                <!-- 日期时间、时间 -->
                                <select-para 
                                    v-if="['datetime', 'time'].indexOf(child.eleTypeCode) > -1" 
                                    v-model="child.opeCode" 
                                    :options="casOpt10" 
                                    :label.sync="child.opeName"
                                    @change="(value) => opeCodeChange(child, value)">
                                </select-para>
                                <!-- 时间范围 -->
                                <select-para 
                                    v-if="['daterange', 'datetimerange', 'timerange'].indexOf(child.eleTypeCode) > -1" 
                                    v-model="child.opeCode" 
                                    :options="casOpt9" 
                                    :label.sync="child.opeName"
                                    @change="(value) => opeCodeChange(child, value)">
                                </select-para>
                                <!-- 机构、员工、用户 -->
                                <select-para 
                                    v-if="['dept', 'staff'].indexOf(child.eleTypeCode) > -1" 
                                    v-model="child.opeCode" 
                                    :options="casOpt2" 
                                    :label.sync="child.opeName"
                                    @change="(value) => opeCodeChange(child, value)">
                                </select-para>
                                <!-- 数值 -->
                                <select-para 
                                    v-if="['number', 'inter'].indexOf(child.eleTypeCode) > -1" 
                                    v-model="child.opeCode" 
                                    :options="casOpt7" 
                                    :label.sync="child.opeName"
                                    @change="(value) => opeCodeChange(child, value)">
                                </select-para>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label-width="5px" v-if="child.opeCode">
                                <el-form-item 
                                    v-if="(['input', 'textarea', 'richTxt', 'miniTxt', 'link', 'email', 'mobile', 'tel'].indexOf(child.eleTypeCode) > -1) && (['IS_NULL', 'IS_NOT_NUL'].indexOf(child.opeCode) == -1)" 
                                    :prop="'conditions.'+ index2 +'.startVal'" 
                                    :rules="[...rule.startVal, ...child.rules]">
                                    <el-input v-model="child.startVal" v-bind="child.attrs" :rule="child.rules"></el-input>
                                </el-form-item>

                                <el-form-item 
                                    v-if="['select', 'radio', 'checkbox'].indexOf(child.eleTypeCode) > -1" 
                                    :prop="'conditions.'+ index2 +'.startVal'" 
                                    :rules="[...rule.startVal, ...child.rules]">
                                    <select-para v-if="child.valType == 'string'" key="select1" :code="child.elemCascCode" v-bind="child.attrs" :multiple="false" :options="child.options" v-model="child.startVal" :collapseTags="false"></select-para>
                                    <select-para v-else :code="child.elemCascCode" key="select2" v-bind="child.attrs" :multiple="true" :options="child.options" v-model="child.startVal" :collapseTags="false"></select-para>
                                </el-form-item>
                                
                                <template v-if="child.eleTypeCode == 'date'">
                                    <el-row>
                                        <template v-if="['BETWEEN', 'NOBETWEEN'].indexOf(child.opeCode) > -1">
                                            <el-col :span="12">
                                                <el-form-item :prop="'conditions.'+ index2 +'.startVal'" :rules="[...rule.startVal, ...child.rules]">
                                                    <el-date-picker 
                                                        type="date" 
                                                        v-model="child.startVal" 
                                                        value-format="yyyy-MM-dd"
                                                        :picker-options="{
                                                            disabledDate(time) {
                                                                return time.getTime() > (child.endVal ? (new Date(child.endVal).getTime() - 1000*60*60*24) : (time.getTime() + 1000*60*60*24));
                                                            }
                                                        }">
                                                    </el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label-width="5px" :prop="'conditions.'+ index2 +'.endVal'" :rules="[...rule.endVal, ...child.rules]">
                                                    <el-date-picker 
                                                        type="date" 
                                                        v-model="child.endVal" 
                                                        value-format="yyyy-MM-dd"
                                                        :picker-options="{
                                                            disabledDate(time) {
                                                                return time.getTime() < (child.startVal ? new Date(child.startVal).getTime() : (time.getTime() - 1000*60*60*24));
                                                            }
                                                        }">
                                                    </el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                        </template>
                                        <template v-else-if="['EQ', 'NE', 'LE', 'GE'].indexOf(child.opeCode) > -1">
                                            <el-col :span="24">
                                                <el-form-item :prop="'conditions.'+ index2 +'.startVal'" :rules="[...rule.startVal, ...child.rules]">
                                                    <el-date-picker type="date" v-model="child.startVal" value-format="yyyy-MM-dd"></el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                        </template>
                                    </el-row>
                                </template>

                                <template v-if="child.eleTypeCode == 'datetime'">
                                    <el-row>
                                        <template v-if="['BETWEEN', 'NOBETWEEN'].indexOf(child.opeCode) > -1">
                                            <el-col :span="12">
                                                <el-form-item :prop="'conditions.'+ index2 +'.startVal'" :rules="[...rule.startVal, ...child.rules]">
                                                    <el-date-picker 
                                                        type="datetime" 
                                                        v-model="child.startVal" 
                                                        value-format="yyyy-MM-dd HH:mm:ss">
                                                    </el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label-width="5px" :prop="'conditions.'+ index2 +'.endVal'" :rules="[...rule.endVal, ...child.rules]">
                                                    <el-date-picker 
                                                        type="datetime" 
                                                        v-model="child.endVal" 
                                                        value-format="yyyy-MM-dd HH:mm:ss">
                                                    </el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                        </template>
                                        <template v-else-if="['EQ', 'NE', 'LE', 'GE'].indexOf(child.opeCode) > -1">
                                            <el-col :span="24">
                                                <el-form-item :prop="'conditions.'+ index2 +'.startVal'" :rules="[...rule.startVal, ...child.rules]">
                                                    <el-date-picker type="datetime" v-model="child.startVal" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                        </template>
                                    </el-row>
                                </template>

                                <template v-if="child.eleTypeCode == 'time'">
                                    <el-row>
                                        <template v-if="['BETWEEN', 'NOBETWEEN'].indexOf(child.opeCode) > -1">
                                            <el-col :span="12">
                                                <el-form-item :prop="'conditions.'+ index2 +'.startVal'" :rules="[...rule.startVal, ...child.rules]">
                                                    <el-time-select 
                                                        v-model="child.startVal" 
                                                        value-format="HH:mm:ss"
                                                        :picker-options="{
                                                            start: '00:00',
                                                            step: '00:15',
                                                            end: '23:45',
                                                            maxTime: child.endVal
                                                        }">
                                                    </el-time-select>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label-width="5px" :prop="'conditions.'+ index2 +'.endVal'" :rules="[...rule.endVal, ...child.rules]">
                                                    <el-time-select 
                                                        v-model="child.endVal" 
                                                        value-format="HH:mm:ss"
                                                        :picker-options="{
                                                            start: '00:00',
                                                            step: '00:15',
                                                            end: '23:45',
                                                            minTime: child.startVal
                                                        }">
                                                    </el-time-select>
                                                </el-form-item>
                                            </el-col>
                                        </template>
                                        <template v-else-if="['EQ', 'NE', 'LE', 'GE'].indexOf(child.opeCode) > -1">
                                            <el-col :span="24">
                                                <el-form-item :prop="'conditions.'+ index2 +'.startVal'" :rules="[...rule.startVal, ...child.rules]">
                                                    <el-time-select 
                                                        v-model="child.startVal" 
                                                        value-format="HH:mm:ss"
                                                        :picker-options="{
                                                            start: '00:00',
                                                            step: '00:15',
                                                            end: '23:45',
                                                        }">
                                                    </el-time-select>
                                                </el-form-item>
                                            </el-col>
                                        </template>
                                    </el-row>
                                </template>

                                <template v-if="child.eleTypeCode == 'daterange'">
                                    <el-row>
                                        <template v-if="['BETWEEN', 'NOBETWEEN'].indexOf(child.opeCode) > -1">
                                            <el-col :span="12">
                                                <el-form-item :prop="'conditions.'+ index2 +'.startVal'" :rules="[...rule.startVal, ...child.rules]">
                                                    <el-date-picker 
                                                        type="date" 
                                                        v-model="child.startVal" 
                                                        value-format="yyyy-MM-dd"
                                                        :picker-options="{
                                                            disabledDate(time) {
                                                                return time.getTime() > (child.endVal ? (new Date(child.endVal).getTime() - 1000*60*60*24) : (time.getTime() + 1000*60*60*24));
                                                            }
                                                        }">
                                                    </el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label-width="5px" :prop="'conditions.'+ index2 +'.endVal'" :rules="[...rule.endVal, ...child.rules]">
                                                    <el-date-picker 
                                                        type="date" 
                                                        v-model="child.endVal" 
                                                        value-format="yyyy-MM-dd"
                                                        :picker-options="{
                                                            disabledDate(time) {
                                                                return time.getTime() < (child.startVal ? new Date(child.startVal).getTime() : (time.getTime()));
                                                            }
                                                        }">
                                                    </el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                        </template>
                                    </el-row>
                                </template>

                                <template v-if="child.eleTypeCode == 'datetimerange'">
                                    <el-row>
                                        <template v-if="['BETWEEN', 'NOBETWEEN'].indexOf(child.opeCode) > -1">
                                            <el-col :span="12">
                                                <el-form-item :prop="'conditions.'+ index2 +'.startVal'" :rules="[...rule.startVal, ...child.rules]">
                                                    <el-date-picker type="datetime" v-model="child.startVal" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label-width="5px" :prop="'conditions.'+ index2 +'.endVal'" :rules="[...rule.endVal, ...child.rules]">
                                                    <el-date-picker type="datetime" v-model="child.endVal" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                        </template>
                                    </el-row>
                                </template>

                                <template v-if="child.eleTypeCode == 'timerange'">
                                    <el-row>
                                        <template v-if="['BETWEEN', 'NOBETWEEN'].indexOf(child.opeCode) > -1">
                                            <el-col :span="12">
                                                <el-form-item :prop="'conditions.'+ index2 +'.startVal'" :rules="[...rule.startVal, ...child.rules]">
                                                    <el-time-select 
                                                        v-model="child.startVal" 
                                                        value-format="HH:mm:ss"
                                                        :picker-options="{
                                                            start: '00:00',
                                                            step: '00:15',
                                                            end: '23:45',
                                                            maxTime: child.endVal
                                                        }">
                                                    </el-time-select>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label-width="5px" :prop="'conditions.'+ index2 +'.endVal'" :rules="[...rule.endVal, ...child.rules]">
                                                    <el-time-select 
                                                        v-model="child.endVal" 
                                                        value-format="HH:mm:ss"
                                                        :picker-options="{
                                                            start: '00:00',
                                                            step: '00:15',
                                                            end: '23:45',
                                                            minTime: child.startVal
                                                        }">
                                                    </el-time-select>
                                                </el-form-item>
                                            </el-col>
                                        </template>
                                    </el-row>
                                </template>

                                <el-form-item 
                                    v-if="(child.eleTypeCode == 'dept') && (['IS_NULL', 'IS_NOT_NUL'].indexOf(child.opeCode) == -1)" 
                                    :prop="'conditions.'+ index2 +'.startVal'" 
                                    :rules="[...rule.startVal, ...child.rules]">
                                    <select-dept v-if="child.valType == 'string'" key="dept1" v-model="child.startVal" :label.sync="child.startName" v-bind="child.attrs" :multiple="false"></select-dept>
                                    <select-dept v-else key="dept2" v-model="child.startVal" :label.sync="child.startName" v-bind="child.attrs" :multiple="true"></select-dept>
                                </el-form-item>

                                <el-form-item 
                                    v-if="(child.eleTypeCode == 'staff') && (['IS_NULL', 'IS_NOT_NUL'].indexOf(child.opeCode) == -1)" 
                                    :prop="'conditions.'+ index2 +'.startVal'" 
                                    :rules="[...rule.startVal, ...child.rules]">
                                    <select-user v-if="child.valType == 'string'" :key="child.key+'staff1'" v-model="child.startVal" :label.sync="child.startName" v-bind="child.attrs" :multiple="false"></select-user>
                                    <select-user v-else :key="child.key+'staff2'" v-model="child.startVal" :label.sync="child.startName" v-bind="child.attrs" :multiple="true"></select-user>
                                </el-form-item>

                                <el-form-item 
                                    v-if="child.eleTypeCode == 'addr'" 
                                    :prop="'conditions.'+ index2 +'.startVal'" 
                                    :rules="[...rule.startVal, ...child.rules]">
                                    <select-addr v-if="child.valType == 'string'" :key="child.key+'addr1'" v-model="child.startVal" :label.sync="child.startName" :typeCode="child.attrs.addrType" v-bind="child.attrs" :multiple="false"></select-addr>
                                    <select-addr v-else :key="child.key+'addr2'" v-model="child.startVal" :label.sync="child.startName" :typeCode="child.attrs.addrType" v-bind="child.attrs" :multiple="true"></select-addr>
                                </el-form-item>

                                <el-form-item
                                    v-if="child.eleTypeCode == 'diyCasc'"
                                    :prop="'conditions.'+ index2 +'.startVal'"
                                    :rules="[...rule.startVal, ...child.rules]">
                                    <el-cascader
                                        v-if="['EQ', 'NE'].indexOf(child.opeCode) > -1"
                                        :key="child.key+'diyCasc1'"
                                        v-model="child.startVal"
                                        :options="child.options"
                                        v-bind="child.attrs"
                                        :props="{...defaultProps, checkStrictly: true, multiple: false}" aa>
                                    </el-cascader>
                                    <el-cascader
                                        v-else
                                        :key="child.key+'diyCasc2'"
                                        v-model="child.startVal"
                                        :options="child.options"
                                        v-bind="child.attrs"
                                        :props="{...defaultProps, checkStrictly: true, multiple: true}" bb>
                                    </el-cascader>
                                </el-form-item>

                                <el-form-item
                                    v-if="child.eleTypeCode == 'label'"
                                    :prop="'conditions.'+ index2 +'.startVal'"
                                    :rules="[...rule.startVal, ...child.rules]">
                                    <select-label v-model="child.startVal" v-bind="child.attrs"></select-label>
                                </el-form-item>

                                <template v-if="['number', 'inter'].indexOf(child.eleTypeCode) > -1">
                                    <el-row>
                                        <template v-if="['BETWEEN', 'NOBETWEEN'].indexOf(child.opeCode) > -1">
                                            <el-col :span="12">
                                                <el-form-item :prop="'conditions.'+ index2 +'.startVal'" :rules="[...rule.startVal, ...child.rules]">
                                                    <el-input v-model="child.startVal" v-bind="child.attrs"></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label-width="5px" :prop="'conditions.'+ index2 +'.endVal'" :rules="[...rule.endVal, ...child.rules]">
                                                    <el-input v-model="child.endVal" v-bind="child.attrs"></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </template>
                                        <template v-else-if="['EQ', 'NE', 'GT', 'GE', 'LT', 'LE'].indexOf(child.opeCode) > -1">
                                            <el-col :span="24">
                                                <el-form-item :prop="'conditions.'+ index2 +'.startVal'" :rules="[...rule.startVal, ...child.rules]">
                                                    <el-input v-model="child.startVal" v-bind="child.attrs"></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </template>
                                        <template v-else></template>
                                    </el-row>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" class="remove-wrap">
                            <i class="el-icon-remove" @click="removeCondition(child, index2)"></i>
                        </el-col>
                    </el-row>
                    <el-button type="text" @click="addCondition"><i class="el-icon-circle-plus"></i>添加条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <template v-if="showDemo">
            <h1 style="font-size:24px;font-weight:500;">实时数据</h1>
            <p v-for="(item,index) in ruleForm.conditions" :key="item.key">
                序号：{{ index }}&nbsp;&nbsp;{{ item }}
            </p>
        </template>
    </div>
</template>

<script>
import selectPara from '@/components/common/comp/selectPara';
import commCheckbox from '@/components/commCheckbox';
import selectRole from '@/components/selectRole';
import selectUser from '@/components/selectUser';
import selectStaff from '@/components/selectStaff';
import selectDept from '@/components/selectDept';
import selectAddr from '@/components/selectAddr';
import selectLabel from '@/components/selectLabel';
import { queryAllField } from '@/service/core/queryView';
import { queryByPeleItem } from './service.js';
export default {
    name: 'triggerCondition', // 触发条件组件
    props: {
        clayId: { // 自定义字段 分类编号
            type: String,
            default: ''
        },
        fromTypeCode: { // 自定义字段类型   BASIC: 系统字段  EXTEND: 用户字段 为空则两种全部显示
            type: String,
            default: ''
        },
        showDemo: { // 是否显示demo数据
            type: Boolean,
            default: false
        }
    },
    components: {
        selectPara,
        commCheckbox,
        selectRole,
        selectUser,
        selectStaff,
        selectDept,
        selectAddr,
        selectLabel
    },
    data() {
        return {
            ruleForm: {
                conditions: [],
            },
            rule: {
                conditions: [
                    { required: true, message: '请添加触发条件', trigger: 'change', type: 'array' },
                ],
                fieldCode: [
                    { required: true, message: '请选择条件字段', trigger: 'change' },
                ],
                opeCode: [
                    { required: true, message: '请选择运算符', trigger: 'change' },
                ],
                startVal: [
                    { required: true, message: '请选择字段值', trigger: 'change' },
                ],
                endVal: [
                    { required: true, message: '请选择字段值', trigger: 'change' },
                ],
            },
            condition: { // 触发条件
                key: '',
                fieldCode: '',
                fieldName: '',
                opeCode: '',
                opeName: '',
                startVal: [],
                startName: [],
                endVal: [],
                endName: [],
                eleTypeCode: '',
                elemCascCode: '',
                attrs: {},
                options: [],
                valType: 'string',
                rules: {}
            },
            condOpt: [], // 查询条件下拉项
            casOpt1: [ // 运算符下拉项 -- input/textarea
                {
                    label: '等于',
                    value: 'EQ'
                },
                {
                    label: '不等于',
                    value: 'NE'
                },
                {
                    label: '开始等于',
                    value: 'START_LIKE'
                },
                {
                    label: '开始不等于',
                    value: 'START_NOT_LIKE'
                },
                {
                    label: '结束等于',
                    value: 'END_LIKE'
                },
                {
                    label: '结束不等于',
                    value: 'END_NOT_LIKE'
                },
                {
                    label: '包含',
                    value: 'ALL_LIKE'
                },
                {
                    label: '不包含',
                    value: 'ALL_NOT_LIKE'
                },
                {
                    label: '为空',
                    value: 'IS_NULL'
                },
                {
                    label: '不为空',
                    value: 'IS_NOT_NUL'
                },
            ],
            casOpt2: [ // 运算符下拉项 -- select/radio
                {
                    label: '等于',
                    value: 'EQ'
                },
                {
                    label: '不等于',
                    value: 'NE'
                },
                {
                    label: '包含任意',
                    value: 'IN'
                },
                {
                    label: '不包含任意',
                    value: 'NOT_IN'
                },
            ],
            casOpt4: [ // 运算符下拉项 -- date/datetime/time
                {
                    label: '今天',
                    value: 'TODAY'
                },
                {
                    label: '明天',
                    value: 'TOMORROW'
                },
                {
                    label: '本周',
                    value: 'THISWEEK'
                },
                {
                    label: '本月',
                    value: 'THISMONTH'
                },
                {
                    label: '是',
                    value: 'EQ'
                },
                {
                    label: '不是',
                    value: 'NE'
                },
                {
                    label: '早于',
                    value: 'LE'
                },
                {
                    label: '晚于',
                    value: 'GE'
                },
                {
                    label: '介于',
                    value: 'BETWEEN'
                },
                {
                    label: '不介于',
                    value: 'NOBETWEEN'
                },
                {
                    label: '为空',
                    value: 'IS_NULL'
                },
                {
                    label: '不为空',
                    value: 'IS_NOT_NUL'
                },
            ],
            casOpt7: [ // 运算符下拉项 -- number
                {
                    label: '等于',
                    value: 'EQ'
                },
                {
                    label: '不等于',
                    value: 'NE'
                },
                {
                    label: '大于',
                    value: 'GT'
                },
                {
                    label: '大于等于',
                    value: 'GE'
                },
                {
                    label: '小于',
                    value: 'LT'
                },
                {
                    label: '小于等于',
                    value: 'LE'
                },
                {
                    label: '介于',
                    value: 'BETWEEN'
                },
                {
                    label: '不介于',
                    value: 'NOBETWEEN'
                },
                {
                    label: '为空',
                    value: 'IS_NULL'
                },
                {
                    label: '不为空',
                    value: 'IS_NOT_NUL'
                },
            ],
            casOpt9: [ // // 运算符下拉项 -- timerange
                {
                    label: '介于',
                    value: 'BETWEEN'
                },
                {
                    label: '不介于',
                    value: 'NOBETWEEN'
                },
            ],
            casOpt10: [
                {
                    label: '等于',
                    value: 'EQ'
                },
                {
                    label: '不等于',
                    value: 'NE'
                },
                {
                    label: '早于',
                    value: 'LE'
                },
                {
                    label: '晚于',
                    value: 'GE'
                },
                {
                    label: '介于',
                    value: 'BETWEEN'
                },
                {
                    label: '不介于',
                    value: 'NOBETWEEN'
                },
                {
                    label: '为空',
                    value: 'IS_NULL'
                },
                {
                    label: '不为空',
                    value: 'IS_NOT_NUL'
                },
            ],
            defaultProps: {
                label: 'name',
                value: 'name',
                children: 'children'
            },
        }
    },
    watch: {
        clayId: {
            handler: function(val) {
                if(val) {
                    this.queryAllFieldFun();
                    if(this.showDemo) {
                        this.ruleForm.conditions = [];
                    }
                }
            },
            immediate: true
        },
        fromTypeCode(val) {
            if(this.clayId) {
                this.queryAllFieldFun();
                if(this.showDemo) {
                    this.ruleForm.conditions = [];
                }
            }
        }
        
    },
    methods: {
        addCondition() { // 添加新条件
            let condition = JSON.parse(JSON.stringify(this.condition));
            this.ruleForm.conditions.push({
                ...condition,
                key: new Date().getTime()
            });
        },
        conditionChange(child, value) { // 条件字段change
            child.opeCode = '';
            child.opeName = '';

            let obj = this.condOpt.find(v => v.value == value);
            child.eleTypeCode = '';
            if(obj) {
                if(obj.valType == 'array') {
                    child.startVal = [];
                    child.startName = [];
                    child.endVal = [];
                    child.endName = [];
                }else if(obj.valType == 'number') {
                    child.startVal = 0;
                    child.startName = '';
                    child.endVal = 0;
                    child.endName = '';
                }else if(obj.valType == 'inter') {
                    child.startVal = 0;
                    child.startName = '';
                    child.endVal = 0;
                    child.endName = '';
                }else if(obj.valType == 'string') {
                    child.startVal = '';
                    child.startName = '';
                    child.endVal = '';
                    child.endName = '';
                }
                child.eleTypeCode = obj.eleTypeCode;
                child.elemCascCode = obj.elemCascCode;
                child.attrs = obj.attrs;
                child.options = obj.options;
                child.valType = obj.valType;
                child.rules = obj.rules;
            }
        },
        opeCodeChange(child, value) { // 运算符change
            if(['select', 'radio', 'checkbox', 'dept', 'staff'].indexOf(child.eleTypeCode) > -1) {
                if(['EQ', 'NE', 'IS_NULL', 'IS_NOT_NUL'].indexOf(child.opeCode) > -1) {
                    child.valType = 'string';
                }else {
                    child.valType = 'array'
                }
            }else if(['addr', 'diyCasc'].indexOf(child.opeCode) > -1) {
                child.valType = 'array'
            }

            if(child.valType == 'array') {
                child.startVal = [];
                child.startName = [];
                child.endVal = [];
                child.endName = [];
            }else if(child.valType == 'number') {
                child.startVal = 0;
                child.startName = '';
                child.endVal = 0;
                child.endName = '';
            }else if(child.valType == 'inter') {
                child.startVal = 0;
                child.startName = '';
                child.endVal = 0;
                child.endName = '';
            }else if(child.valType == 'string') {
                child.startVal = '';
                child.startName = '';
                child.endVal = '';
                child.endName = '';
            }
        },
        removeCondition(child, index) { // 删除条件
            this.ruleForm.conditions.splice(index, 1);
        },
        queryAllFieldFun() { // 查询模块下的所有字段
            if(!this.clayId) {
                return
            }
            let params = {
                columns: 'crtDt',
                orders: 'DESC',
                clayId: this.clayId,
                fromTypeCode: this.fromTypeCode
            }
            queryByPeleItem(params).then(res => {
                if(res.data.code == 1000) {
                    let data = res.data.data;
                    if(Array.isArray(data)) {
                        this.condOpt = data.map((item, index) => {
                            // 组件属性处理
                            let attrs = {};
                            let cfPageEleAttrsStr = item.cfPageEleAttrsStr ? JSON.parse(item.cfPageEleAttrsStr) : [];
                            cfPageEleAttrsStr.forEach(item2 => {
                                attrs[item2.attrKey] = item2['attrValue'];
                            })

                            // 组件选项数据
                            let options = item.cfFunPeleItems || [];

                            // 下拉框/复选/单选 选项数据单独处理
                            if(item.eleTypeCode == 'select' || item.eleTypeCode == 'checkbox' || item.eleTypeCode == 'radio') {
                                options = options.map(item3 => {
                                    return {
                                        label: item3.name,
                                        value: item3.name,
                                        // haveDefault: item3.haveDefault
                                    }
                                })
                            }

                            // 组件校验规则
                            let rules = item.cfPageRuleAttrsStr ? JSON.parse(item.cfPageRuleAttrsStr) : [];
                            // 筛选出 用户勾选的校验和默认的校验规则
                            rules = rules.filter(item4 => {
                                return (item4.isCheck || item4.isEdit == false)
                            });
                            // 小数点限制位数 特殊处理
                            rules = rules.map(item5 => {
                                if(item5.hasOwnProperty('pointMax') && item5.pointMax >= 0) {
                                    item5.pattern = item5.pattern.replace('pointMax', item5.pointMax);
                                }

                                if(item5.hasOwnProperty('pattern')) {
                                    item5.pattern = eval(item5.pattern);
                                }
                                return item5
                            })

                            // 判断组件绑定值类型
                            let valType;
                            switch(item.eleTypeCode) {
                                case 'input':
                                case 'textarea':
                                case 'richTxt':
                                case 'miniTxt':
                                case 'date':
                                case 'time':
                                case 'datetime':
                                case 'daterange':
                                case 'datetimerange':
                                case 'timerange':
                                case 'link':
                                case 'email':
                                case 'mobile':
                                case 'tel':
                                case 'radio':
                                    valType = 'string';
                                    break;
                                case 'number':
                                case 'inter':
                                    valType = 'number';
                                    break;
                                case 'checkbox':
                                case 'addr':
                                case 'diyCasc':
                                case 'label':
                                    valType = 'array';
                                    break;
                                case 'select':
                                case 'dept':
                                case 'staff':
                                    if(attrs.multiple) {
                                        valType = 'array';
                                    }else {
                                        valType = 'string';
                                    }
                                    break;
                                default: 
                                    valType = 'string';
                                    break;
                            }

                            return {
                                ...item,
                                label: item.cname,
                                value: item.ename || index,
                                attrs: attrs,
                                options: options,
                                valType: valType,
                                rules: rules
                            }
                        })
                    }
                }
            }).catch(error => {})
        },
        resetFields() { // 重置
            this.ruleForm.conditions = [];
            this.$nextTick(() => {
                this.$refs.form.resetFields();
            })
        },
        getData() { // 获取数据
            return new Promise((resolve, reject) => {
                this.$refs.form.validate(valid => {
                    if(valid) {
                        resolve(this.ruleForm.conditions)
                    }else {
                        reject()
                    }
                })
            })
        },
        setData(data) { // 设置数据
            this.ruleForm.conditions = data
        },
    }
}
</script>

<style lang='scss' scoped>
.rule-wrap {
    position: relative;
    padding: 10px 30px 0 15px;
    border: 1px dashed #ddd;
    margin-bottom: 10px;
    background-color: #f2f6fc;
    .del-btn {
        display: none;
        position: absolute;
        top: 10px;
        right: 10px;
        height: 20px;
        line-height: 20px;
        cursor: pointer;
        span {
            font-size: 18px;
        }
    }
    &:hover .del-btn {
        display: block;
    }
    .remove-wrap {
        text-align: center;
        i {
            font-size: 16px;
            cursor: pointer;
        }
    }
}
.mb5 {
    margin-bottom: 5px;
}
.mb10 {
    margin-bottom: 10px;
}
</style>